<template>
  <div class="doWord">
    <div class="head">
      <div>
        <van-dropdown-menu
          :overlay="false"
          active-color="#222222"
          close-on-click-outside
        >
          <van-dropdown-item ref="item">
            <template #title>
              <span>面试宝典</span>
              <span style="margin-left: 10px; font-size: 12px">{{
                address
              }}</span>
            </template>
            <van-cell>
              <van-index-bar>
                <div v-for="(item, keys) in citys" :key="keys">
                  <van-index-anchor
                    :index="keys"
                    style="backgroundcolor: #f7f4f5; fontsize: 12px"
                  />
                  <van-cell
                    style="fontsize: 16px; padding: 10px 15px"
                    :title="subItem"
                    v-for="subItem in item"
                    :key="subItem"
                    @click="selectItem(subItem)"
                  />
                </div>
              </van-index-bar>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>

      <van-cell>
        <div class="select">
          <van-tag
            :class="{ selectItemActive: index == selectIndex }"
            @click="selectTag(index)"
            v-for="(item, index) in keyWord"
            :key="item.id"
            >{{ item.name }}</van-tag
          >
        </div>
      </van-cell>
    </div>
    <div class="show">
      <div class="left">
        <div class="item">
          <i class="iconfont iconicon_mine_cuoti err"></i>
          常错题库
        </div>
        <div class="item">
          <i class="iconfont iconicon_mine_qiyeshoucang blue"></i>
          企业题库
        </div>
      </div>
      <div class="content">
        <!-- <van-circle
          v-model="currentRate"
          :rate="30"
          :speed="100"
          layer-color="#fdedf1"
          color="#ee6c8b"
          size="120"
          stroke-width="80"
        >
          <template>
            <div class="CicleText">
              <span>顺序刷题</span>
              <span>50/233</span>
            </div>
          </template>
        </van-circle> -->
        <div class="center">
          <!--
            van-circle
              v-model:当前进度
              rate:目标值
              speed:多少rate/秒
              layer-color:轨道背景色
              color:进度条颜色
         -->
          <van-circle
            class="circle"
            v-model="currentRate"
            layer-color="none"
            :rate="30"
            :speed="100"
            color="#ee6c8b"
          >
            <div class="circle-num">
              <div style="padding-top: 30px">顺序刷题</div>
              <div style="margin-top: 10px">50/233</div>
            </div>
          </van-circle>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <i class="iconfont iconicon_mine_tikushoucang yel"></i>
          收藏题库
        </div>
        <div class="item">
          <i class="iconfont iconicon_mine_mianjing green"></i>
          已答题库
        </div>
      </div>
    </div>

    <div class="add">
      <div class="text">累计收录</div>
      <div class="number">23,453,245,000</div>
    </div>

    <!-- 按钮 -->
    <div class="btn" @click="toFace">模拟面试</div>
  </div>
</template>

<script>
import { getCity } from '@/api/exercise.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      currentRate: 0,
      address: '北京',
      citys: {},
      cityPositions: {},
      selectIndex: 0,
      type: ''
    }
  },
  created () {
    this.getCityList()
  },
  computed: {
    ...mapState('user', ['token']),
    keyWord () {
      return this.cityPositions[this.address]
    }
  },
  watch: {
    keyWord () {
      this.type =
        this.cityPositions[this.address] &&
        this.cityPositions[this.address][0].id
    }
  },
  methods: {
    async getCityList () {
      this.$toast.loading({
        message: '加载中...'
      })
      let res = await getCity()
      console.log(res.data)
      this.citys = res.data.data.citys
      this.cityPositions = res.data.data.cityPositions
    },
    // 选中
    selectItem (subItem) {
      this.address = subItem
      this.selectIndex = 0
      this.$refs.item.toggle(false)
    },
    // 选中tag
    selectTag (index) {
      this.selectIndex = index
      this.type = this.keyWord[index].id
    },
    // 模拟面试
    toFace () {
      if (this.token) {
        console.log('有token')
        this.$router.push({
          path: '/interview',
          query: { city: this.address, type: this.type }
        })
      } else {
        // 没有token则跳转到登录页
        setTimeout(() => {
          // console.log(this)
          this.$router.push('/login')
        }, 800)
        this.$toast({
          message: '请先登录!',
          duration: 800 // 持续展示 toast
        })
      }
    }
  }
}
</script>
